<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #ccc;
    }
    div {
      width: 300px;
      height: 80px;
      background-color: #ccc;
      line-height: 40px;
      text-align: center;
      color: red;
      text-shadow: -1px -1px 0 #ccc, 1px 1px 0 #fff;
    }
  </style>
</head>
<body>

  <div>
    <p>距离出去浪还有: </p>
    <span id="timeBox"> 00 天 00 小时 00 分 00 秒</span>
  </div>

  <script src="./utils.js"></script>
  <script>
    /*
      倒计时

        + 每间隔 1s 拿到一次当前时间和目标时间之间的时间差
          => 间隔定时器
            -> 当前时间
        + 直接获取到目标时间
    */

    // 1. 拿到目标时间
    var target = new Date('2022-3-1 17:18:30')


    // 2. 开启定时器
    var timer = setInterval(function () {
      // 3. 在定时器内拿到当前时间
      var current = new Date()

      // 4. 拿到每一次的时间差
      var diff = diffTime(current, target)

      // 5. 写入页面
      // 元素.innerText = 值
      // 向一个标签内写入文本, 当你写入第二个文本的时候, 会覆盖第一个
      timeBox.innerText = ` ${ diff.day } 天 ${ diff.hours } 小时 ${ diff.minutes } 分 ${ diff.seconds } 秒`

      // 6. 关闭定时器
      // 当四个值都是 0 的时候, 关闭定时器
      if (diff.day === 0 && diff.hours === 0 && diff.minutes === 0 && diff.seconds === 0) clearInterval(timer)
    }, 1000)

  </script>
</body>
</html>
